<template>
	<div class="home">
		<div class="head">
			<div class="img">
				<van-image
					v-show="index == currentImg"
					v-for="(item, index) in imgArr"
					fit="cover"
					width="94"
					height="125"
					:src="item.image"
					:key="index"
				/>
			</div>
			<div class="text">
				<p>{{ skuInfo?.defaultPrice }}</p>
				<div class="sp">
					<span>库存：{{ total }}</span
					><br />
					<span v-show="chooseDetailArr.size || chooseDetailArr.color">已选： </span>
					<span v-show="!chooseDetailArr.size && !chooseDetailArr.color">请选择： </span>
					<span v-if="skuInfo?.props[1]?.list" class="size" :class="{active: chooseDetailArr.size}">{{ chooseDetail.size }} </span>
					<span v-if="skuInfo?.props[0]?.list" class="color" :class="{active: chooseDetailArr.color}">{{ chooseDetail.color }}</span>
				</div>
			</div>
		</div>
		<div class="content-index">
			<div class="content">
				<div v-if="skuInfo?.props[0]?.list" class="color">
					<p>颜色</p>
					<div class="c-color">
						<div
							@click="toggleColor(index, item.name, item.styleId)"
							:class="{active: currentColor == index}"
							v-for="(item, index) in skuInfo.props[0].list"
							:key="index"
						>
							{{ item.name }}
						</div>
					</div>
				</div>
				<div v-if="skuInfo?.props[1]?.list" class="size">
					<p>尺码</p>
					<div class="c-color">
						<div
							@click="toggleSize(index, item.name, item.sizeId)"
							:class="{active: currentSize == index}"
							v-for="(item, index) in skuInfo.props[1].list"
							:key="index"
						>
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="count">
					<p>数量</p>
					<div class="num">
						<van-icon size="9" class="minus" @click="minus" name="minus" color="#FF5777" />
						<div class="d_inp">
							<div class="di">
								<div class="dd_inp"></div>
								<input
									maxlength="140"
									step="0.000000000000000001"
									enterkeyhint="done"
									pattern="[0-9]*"
									autocomplete="off"
									type="number"
									class="inp"
									v-model="num"
								/>
							</div>
						</div>
						<van-icon size="9" class="plus" @click="plus" name="plus" color="#FF5777" />
					</div>
				</div>
			</div>
		</div>
		<!-- <div style="height: 170px; background-color: #fff; margin-top: -5px"></div> -->
		<div class="buy">
			<div @click="addShopping" class="add-shopping">加入购物车</div>
			<div @click="buyNow" class="notarize">立即购买</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "SpecificationComponents",

	props: ["id", "imgArr", "skuInfo", "chooseDetailArr", "chooseDetail"],

	data() {
		return {
			currentImg: 0, //顶部图片切换
			currentSize: -1, //尺码
			currentColor: -1, //图片
			sizeId: 0,
			styleId: 0,
			num: 1, //eleme计数器
		};
	},

	computed: {
		total() {
			let tot = this.skuInfo.totalStock;
			let [list] = this.skuInfo.skus.filter((item) => {
				if (item.styleId == this.styleId && item.sizeId == this.sizeId) {
					return item;
				}
			});
			//list里面有就返回list里面的 没有返回tot
			console.log(list);

			console.log(list?.stock);

			return list?.stock || tot;
		},
	},

	mounted() {
		// console.log(2222);
		// console.log(this.skuInfo);
		// console.log(this.skuInfo.props);
	},

	methods: {
		toggleSize(index, size, sizeId) {
			//判断当前index是不是上一个 是一样的取消选中不是切换选中
			// this.currentSize = this.currentSize == index ? -1 : index;
			if (this.currentSize == index) {
				this.currentSize = -1;
				this.sizeId = 0;
				this.$emit("changeGoods", {key: "size", value: ""});
			} else {
				this.currentSize = index;
				this.sizeId = sizeId;
				this.$emit("changeGoods", {key: "size", value: size});
			}
		},
		toggleColor(index, color, styleId) {
			// this.currentColor = this.currentColor == index ? -1 : index;
			this.currentImg = this.currentImg == index ? 0 : index;
			this.$emit("changeCurrentImg", this.currentImg);
			// this.$emit("changeGoods", {key: "color", value: color});
			if (this.currentColor == index) {
				this.currentColor = -1;
				this.styleId = 0;
				this.$emit("changeGoods", {key: "color", value: ""});
			} else {
				this.currentColor = index;
				this.styleId = styleId;
				this.$emit("changeGoods", {key: "color", value: color});
			}
		},
		minus() {
			if (this.num > 1) {
				this.num--;
				this.$emit("changeNum", this.num);
			} else {
				this.$toast("很抱歉，该商品至少购买一件");
			}
		},
		plus() {
			if (this.num >= this.total) {
				this.$toast("库存不足！");
				this.num = this.total - 1;
			}
			this.num++;
			this.$emit("changeNum", this.num);
		},
		addShopping() {
			this.$emit("addShopping", false);
		},
		buyNow() {
			this.$emit("buyNow", false);
		},
	},
};
</script>

<style lang="scss" scoped>
.home {
	position: relative;
}
.head {
	position: fixed;
	top: 336px;
	left: 0;
	width: 100%;
	background-color: #fff;
	padding-bottom: 20px;
	z-index: 999;
	.img {
		position: absolute;
		top: -30px;
		left: 20px;
	}
	.text {
		padding-left: 130px;
		background-color: #fff;
		.sp {
			color: #333;
			font-size: 12px;
			// width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.active {
				flex: 1;
				text-align: left;
				color: #f46;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
.content-index {
	margin-top: 172px;
	background-color: #f46;
	overflow-y: auto;
	height: 182px;
	.content {
		background-color: #fff;
		height: auto;
		margin: 0 auto;
		// padding-bottom: 32px;
		// position: absolute;
		.color {
			padding: 5px 20px;
			background-color: #fff;
			// margin-top: 100px;
			border-bottom: 1px solid #e5e5e5;
			p {
				line-height: 12px;
				font-size: 12px;
				color: #999;
			}
			.c-color {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;
				div {
					height: 31px;
					// line-height: 28px;
					min-height: 28px;
					min-width: 62px;
					padding: 8px 15px;
					border: 1px solid #ccc;
					border-radius: 5px;
					margin-right: 10px;
					margin-bottom: 10px;
					font-size: 12px;
					cursor: pointer;
					color: #333;
					text-align: center;
					box-sizing: border-box;
					&.active {
						color: #ff5777;
						border-color: #ff5777;
					}
				}
			}
		}

		.size {
			padding: 5px 20px;
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			p {
				line-height: 12px;
				font-size: 12px;
				color: #999;
			}
			.c-color {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;
				div {
					height: 31px;
					// line-height: 28px;
					min-height: 28px;
					min-width: 62px;
					padding: 8px 15px;
					border: 1px solid #ccc;
					border-radius: 5px;
					margin-right: 10px;
					margin-bottom: 10px;
					font-size: 12px;
					cursor: pointer;
					color: #333;
					text-align: center;
					box-sizing: border-box;
					&.active {
						color: #ff5777;
						border-color: #ff5777;
					}
				}
			}
		}
		.count {
			padding: 5px 20px;
			background-color: #fff;
			margin-bottom: 5px;
			p {
				line-height: 12px;
				font-size: 12px;
				color: #999;
			}
			.num {
				display: flex;
				align-items: center;
				.minus,
				.plus {
					width: 47px;
					height: 27px;
					border-radius: 5px 0 0 5px;
					border: 0.5px solid #ccc;
					background-color: #f1f1f1;
					display: flex;
					align-items: center;
					justify-content: center;
					i {
						font-family: iconfont !important;
						font-size: 16px;
						font-style: normal;
					}
				}
				.plus {
					border-radius: 0 5px 5px 0;
				}
				.d_inp {
					width: 52px;
					text-align: center;
					border-top: 0.5px solid #ccc;
					border-bottom: 0.5px solid #ccc;
					height: 27px;
					.di {
						display: flex;
						position: relative;
						width: 100%;
						height: 100%;
						flex-direction: column;
						justify-content: center;
						.dd_inp {
							position: absolute;
							top: auto !important;
							left: 0;
							color: grey;
							overflow: hidden;
							text-overflow: clip;
							white-space: pre;
							word-break: keep-all;
							pointer-events: none;
							line-height: inherit;
						}
						.inp {
							position: relative;
							display: block;
							height: 100%;
							background: none;
							color: inherit;
							opacity: 1;
							font: inherit;
							line-height: inherit;
							letter-spacing: inherit;
							text-align: inherit;
							text-indent: inherit;
							text-transform: inherit;
							text-shadow: inherit;
							outline: none;
							border: none;
							padding: 0;
							margin: 0;
							text-decoration: inherit;
						}
					}
				}
			}
		}
	}
}

.buy {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 52px;
	display: flex;

	.notarize {
		width: 50%;
		text-align: center;
		line-height: 52px;
		background-color: #ff4a89;
		color: #fff;
		z-index: 99;
	}
	.add-shopping {
		width: 50%;
		text-align: center;
		line-height: 52px;
		background-color: #ffecef;
		color: #ff4466;
		z-index: 99;
	}
}
</style>
